<template>
  <div>
    <div class="title">
      {{ title || '标题' }}
    </div>
    <div class="content-view">
      <template v-if="data.length != 0">
        <div class="content-item" v-for="item in data" :key="item.key">
          <div>{{ item.title }}</div>
          <div>{{ item.count }}</div>
          <el-progress :percentage="item.progress" :show-text="false"></el-progress>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'statistical',
  props: {
    props: { type: Object, default: () => {} },
    title: { type: String, default: '标题' },
    data: {
      type: Array,
      default: () => [],
    },
  },
  computed: {},
}
</script>

<style lang="scss" scoped>
.title {
  border: 1px solid #ccc;
  height: 48px;
  line-height: 48px;
  padding-left: 12px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.content-view {
  display: flex;
  padding: 20px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid #ccc;
  border-top: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  .content-item {
    width: 23%;
    margin-bottom: 20px;
    div:nth-child(1) {
      font-size: 10px;
      color: #666;
    }
    div:nth-child(2) {
      font-weight: 600;
      font-size: 22px;
    }
  }
}
</style>